<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="serchForm" :model="form">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="name" hide-label>
                    <a-input v-model="form.userName" placeholder="请输入用户登录账号" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="state" hide-label>
                    <a-select v-model="form.state" placeholder="请选择用户状态" allow-clear>
                      <a-option value="0">正常</a-option>
                      <a-option value="1">关闭</a-option>
                      <a-option value="2">离职</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="roleId" hide-label>
                    <a-select
                      v-model="form.roleId"
                      placeholder="请选择用户角色"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="(item, index) in roleList" :key="index" :value="item.id">{{
                        item.name
                      }}</a-option>
                      <a-option value="0">默认角色</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addTime" hide-label>
                    <a-date-picker
                      v-model="form.addTime"
                      style="width: 100%"
                      show-time
                      placeholder="请选择开始创建时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endTime" hide-label>
                    <a-date-picker
                      v-model="form.endTime"
                      style="width: 100%"
                      show-time
                      placeholder="请选择结束创建时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="15">
                      <a-button
                        type="primary"
                        v-permission="getTableList"
                        html-type="submit"
                        @click="doRefresh(1)"
                        ><template #icon>
                          <icon-search />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>搜索</template></a-button
                      >
                      <a-button v-permission="getTableList" @click="resetSeach"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <a-button type="primary" v-permission="addUser" @click="onAddItem">
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>新建</template>
          </a-button>
          <a-button
            type="outline"
            v-permission="exportUserList"
            :loading="loading"
            @click="exportDepartments"
          >
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>导出</template>
          </a-button>
        </a-space>
        <a-space :size="15">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :bordered="{ wrapper: true, cell: bordered }"
          :stripe="(striped as boolean)"
          :loading="tableLoading"
          :data="dataList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          :columns="tableColumns.list"
          :scrollbar="true"
          :scroll="{ x: 1300 }"
          table-layout-fixed
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :width="item.width"
              :ellipsis="true"
              :tooltip="true"
              :title="(item.title as string)"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
            >
              <template v-if="item.key === 'index'" #cell="{ rowIndex }">
                {{ rowIndex + 1 }}
              </template>
              <template v-else-if="item.key === 'sessions'" #cell="{ record }">
                <a-button
                  style="padding: 0px 4px"
                  type="text"
                  @click="clickT(record.sessions)"
                  size="small"
                >
                  {{ record.sessions.length }}&nbsp;台</a-button
                >
              </template>
              <template v-else-if="item.key === 'balance'" #cell="{ record }">
                {{ '￥' + record.balance }}
              </template>
              <!-- <template v-else-if="item.key === 'gender'" #cell="{ record }">
                <a-tag :color="record.gender === 0 ? 'green' : 'red'">
                  {{ record.gender === 0 ? '男' : '女' }}
                </a-tag>
              </template> -->
              <template v-else-if="item.key === 'departmentId'" #cell="{ record }">
                <span v-if="record.department">{{ record.department.name }}</span>
                <span v-else>默认部门</span>
              </template>
              <template v-else-if="item.key === 'roleId'" #cell="{ record }">
                <span v-if="record.role">{{ record.role.name }}</span>
                <span v-else>默认角色</span>
              </template>
              <template v-else-if="item.key === 'avatar'" #cell="{}">
                <a-avatar :size="30" :style="{ backgroundColor: 'var(--color-primary-light-1)' }">
                  <IconUser />
                </a-avatar>
              </template>
              <template v-else-if="item.key === 'actions'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    v-permission="updateUser"
                    style="padding: 0px 4px"
                    type="text"
                    @click="onUpdate(record)"
                    size="small"
                    >编辑</a-button
                  >
                  <a-button
                    v-permission="delUser"
                    style="padding: 0px 4px"
                    type="text"
                    @click="onDeleteItem(record)"
                    size="small"
                  >
                    删除
                  </a-button>
                  <a-dropdown>
                    <a-button type="text" style="padding: 0px 4px" size="small">更多</a-button>
                    <template #content>
                      <a-doption v-permission="postBanAdmin" @click="balancePlay(record)"
                        >充值余额</a-doption
                      >
                      <a-doption v-permission="jiedongAdmin" @click="userDoing(record)"
                        >解冻账号</a-doption
                      >
                    </template>
                  </a-dropdown>
                </a-space>
              </template>
              <template v-else-if="item.key === 'state'" #cell="{ record }">
                <a-tag color="blue" size="small" v-if="record.state === 0">正常</a-tag>
                <a-tag color="red" size="small" v-else-if="record.state === 1">关闭</a-tag>
                <a-tag color="red" size="small" v-else>离职</a-tag>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </template>
      <template #footer>
        <TableFooter ref="tableFooterRef" :pagination="pagination" />
      </template>
    </TableBody>
    <a-modal
      v-model:visible="visible"
      @before-close="handleCancel"
      :title="dialogTitle"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="userForm" :auto-label-width="true" :model="subForm">
        <a-form-item
          label="所属角色"
          :rules="[{ required: true, message: '用户角色不能为空' }]"
          :validate-trigger="['change', 'input']"
          field="roleId"
          asterisk-position="end"
        >
          <a-select v-model="subForm.roleId" placeholder="请选择用户角色" allow-clear>
            <a-option v-for="(item, index) in roleList" :key="index" :value="item.id">{{
              item.name
            }}</a-option>
            <a-option value="0">默认角色(敏感权限)</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="登录账号"
          field="userName"
          :rules="[
            { required: true, message: '登录账号不能为空' },
            { minLength: 1, maxLength: 15, message: '登录账号必须小于15个字符' },
          ]"
          asterisk-position="end"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model.trim="subForm.userName" placeholder="请输入用户登录账号" allow-clear />
        </a-form-item>
        <a-form-item label="登录密码" field="passWordmd5">
          <a-input v-model.trim="subForm.passWordmd5" :placeholder="passwordText" allow-clear />
        </a-form-item>
        <a-form-item
          label="用户姓名"
          field="name"
          :rules="[
            { required: true, message: '用户姓名不能为空' },
            { minLength: 1, message: 'must be greater than 1 characters' },
          ]"
          asterisk-position="end"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model.trim="subForm.name" placeholder="请输入用户姓名" allow-clear />
        </a-form-item>
        <a-form-item
          label="手机号码"
          field="phone"
          :rules="[
            { required: true, message: '手机号码不能为空' },
            { minLength: 11, message: '手机号码必须为11位' },
          ]"
          asterisk-position="end"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model="subForm.phone" placeholder="请输入用户手机号码" allow-clear />
        </a-form-item>
        <a-form-item
          label="性别"
          field="gender"
          :rules="[{ required: true, message: '性别不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-radio-group class="radio-bcg" v-model="subForm.gender">
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">男</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">女</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="single" label="登录限制">
          <a-radio-group class="radio-bcg" v-model="subForm.single">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">单点登录</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">多端登录</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          v-if="subForm.id"
          label="账号状态"
          field="state"
          :rules="[{ required: true, message: '账号状态不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-radio-group class="radio-bcg" v-model="subForm.state">
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">正常</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="2">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">离职</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="remarks" label="备注" asterisk-position="end">
          <a-textarea v-model="subForm.remarks" placeholder="请输入备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleBeforeOk">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="balancevisible"
      @before-close="handleCancelBan"
      title="充值余额"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="balanceForms" :auto-label-width="true" :model="banlanceForm">
        <a-form-item field="type" label="充值类型">
          <a-radio-group class="radio-bcg" v-model="banlanceForm.type">
            <a-radio value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">加款</div>
                </div>
              </template>
            </a-radio>
            <a-radio value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">扣款</div>
                </div>
              </template>
            </a-radio>
            <a-radio value="2">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">最终金额</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          field="balance"
          label="充值金额"
          :rules="[{ required: true, message: '充值金额不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input-number v-model="banlanceForm.balance" placeholder="输入充值金额" allow-clear />
        </a-form-item>
        <a-form-item field="remarks" label="备注" asterisk-position="end">
          <a-textarea v-model="banlanceForm.remarks" placeholder="请输入备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelBan">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkBan">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="shebeivisible"
      @before-close="handleCancelsb"
      title="在线设备"
      width="1200px"
      :mask-closable="false"
      title-align="start"
    >
      <a-table
        :bordered="{ wrapper: true, cell: bordered }"
        :stripe="(striped as boolean)"
        :data="sessionList"
        :pagination="false"
        :column-resizable="true"
        :rowKey="rowKey"
        table-layout-fixed
        :tooltip="true"
      >
        <template #columns>
          <a-table-column
            v-for="item of sessionColumns"
            :key="item.key"
            align="left"
            :width="item.width"
            :title="(item.title as string)"
            :data-index="(item.key as string)"
            :ellipsis="true"
            :tooltip="true"
          >
            <template v-if="item.key === 'actions'" #cell="{ record }">
              <a-space :size="2">
                <a-button
                  style="padding: 0px 4px"
                  type="text"
                  status="danger"
                  @click="ouLine(record)"
                  size="small"
                >
                  下线
                </a-button>
              </a-space>
            </template>
            <template v-else-if="item.key === 'status'" #cell="{ record }">
              <a-tag color="blue" size="small" v-if="record.state === 0">正常</a-tag>
              <a-tag color="red" size="small" v-else-if="record.state === 1">关闭</a-tag>
              <a-tag color="red" size="small" v-else>离职</a-tag>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <template #footer>
        <a-space>
          <!-- <a-button @click="handleCancelsb">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkBansb">确定</a-button> -->
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import useCommonStore from '@/store/modules/common'
  import * as http from '@/api/http'

  import {
    getTableList,
    getdepartList,
    addUser,
    updateUser,
    delUser,
    getRoleList,
    postBanAdmin,
    getoutLine,
    jiedongAdmin,
    exportUserList,
  } from '@/api/url'
  import {
    usePagination,
    useRowKey,
    useRowSelection,
    useTable,
    useTableHeight,
  } from '@/hooks/table'
  import { TablePropsType } from '@/types/components'
  import type { ModalDialogType } from '@/types/components'
  import { Form, Message, Modal } from '@arco-design/web-vue'
  import { defineComponent, getCurrentInstance, onMounted, reactive, ref } from 'vue'
  import md5 from 'js-md5'
  export default defineComponent({
    name: 'UserList',
    setup() {
      const useCommon = useCommonStore()
      const userForm = ref<typeof Form>()
      const balanceForms = ref<typeof Form>()
      const departMentList: any = ref([])
      const roleList: any = ref([])
      const sessionList: any = ref([])
      const form = reactive({
        userName: '',
        state: '',
        addTime: '',
        endTime: '',
        isRead: false,
        roleId: '',
      })
      interface subForm {
        id: any
        departmentId: any
        roleId: any
        userName: any //用户名
        passWordmd5: any
        passWord: any //登录密码(对密码进行32位小写MD5加密)为空默认为123456
        name: any //姓名
        phone: any //手机号码
        gender: any //性别 0男 1女
        state: any //账号状态 0正常 1关闭 2离职
        remarks: string //备注
        single: any
      }
      const subForm: subForm = reactive({
        id: '',
        passWordmd5: '',
        departmentId: '',
        roleId: '',
        userName: '', //用户名
        passWord: '', //登录密码(对密码进行32位小写MD5加密)为空默认为123456
        name: '', //姓名
        phone: '', //手机号码
        gender: 0, //性别 0男 1女
        state: 0, //账号状态 0正常 1关闭 2离职
        remarks: '', //备注
        single: false,
      })
      const banlanceForm: any = reactive({
        type: '0',
        balance: 0,
        remarks: '',
      })
      const passwordText = ref()
      const modalDialog = ref<ModalDialogType | null>(null)
      const dialogTitle = ref()
      const table = useTable()
      const rowKey = useRowKey('id')
      const pagination = usePagination(doRefresh)
      const { selectedRowKeys } = useRowSelection()
      const tableColumns: any = reactive({
        list: [
          {
            title: '账号ID',
            key: 'id',
            dataIndex: 'id',
            ellipsis: true,
            tooltip: true,
            checked: true,
            width: 96,
          },
          {
            title: '登录账号',
            key: 'userName',
            dataIndex: 'userName',
            ellipsis: true,
            tooltip: true,
            checked: true,
            width: 173,
          },

          {
            title: '用户姓名',
            key: 'name',
            dataIndex: 'name',
            checked: true,
            width: 139,
          },

          {
            title: '手机号',
            key: 'phone',
            dataIndex: 'phone',
            checked: true,
            width: 150,
          },
          {
            title: '账户余额',
            key: 'balance',
            dataIndex: 'balance',
            checked: true,
            width: 120,
          },

          // {
          //   title: '性别',
          //   key: 'gender',
          //   dataIndex: 'gender',
          //   checked: true,
          // },
          {
            title: '角色',
            key: 'roleId',
            dataIndex: 'roleId',
            checked: true,
            width: 151,
          },
          {
            title: '在线设备',
            key: 'sessions',
            dataIndex: 'sessions',
            checked: true,
            width: 151,
          },
          {
            title: '状态',
            key: 'state',
            dataIndex: 'state',
            checked: true,
            width: 151,
          },
          {
            title: '创建时间',
            key: 'createTime',
            dataIndex: 'createTime',
            width: 190,
            checked: true,
          },
          // {
          //   title: '登录IP',
          //   key: 'lastLoginIp',
          //   dataIndex: 'lastLoginIp',
          // },
          {
            title: '操作',
            key: 'actions',
            fixed: 'right',
            dataIndex: 'actions',
            width: 183,
            align: 'center',
            checked: true,
          },
        ],
      })
      const sessionColumns = [
        {
          width: 130,
          title: '登录IP',
          key: 'ip',
          dataIndex: 'ip',
        },
        {
          width: 100,
          title: '登录地址',
          key: 'address',
          dataIndex: 'address',
        },
        {
          width: 120,
          key: 'operatingSystem',
          title: '操作系统',
          dataIndex: 'operatingSystem',
        },
        { width: 100, key: 'browser', title: '浏览器', dataIndex: 'browser' },
        {
          width: 190,
          key: 'loginTime',
          title: '登录时间',
          dataIndex: 'loginTime',
        },
        {
          width: 190,
          key: 'lastAccessedTime',
          title: '最后访问',
          dataIndex: 'loginTime',
        },
        {
          width: 180,
          key: 'time',
          title: '在线时长',
          dataIndex: 'time',
        },
        {
          title: '操作',
          key: 'actions',
          dataIndex: 'actions',
          width: 80,
          align: 'left',
        },
      ]
      const expandAllFlag = ref(true)
      const tableLoading = ref(true)
      const btnLoading = ref(false)
      const visible = ref(false)
      const balancevisible = ref(false)
      const shebeivisible = ref(false)
      const loading = ref(false)
      const exportDepartments = () => {
        loading.value = true
        useCommon
          .downLoads(exportUserList, form, '管理账号列表')
          .then(() => {
            loading.value = false
          })
          .catch(() => {
            loading.value = false
          })
      }
      const serchForm = ref<typeof Form>()
      const resetSeach = () => {
        serchForm.value?.resetFields()
        doRefresh(1)
      }

      function handleBeforeOkBan() {
        balanceForms.value?.validate().then((error: any) => {
          if (!error) {
            btnLoading.value = true
            http
              .formpost({
                url: postBanAdmin,
                data: () => {
                  return {
                    ...banlanceForm,
                  }
                },
              })
              .then((res) => {
                btnLoading.value = false
                if (res.code == 0) {
                  Message.success(res.msg)
                  balancevisible.value = false
                  doRefresh()
                } else {
                  Message.error(res.msg)
                }
              })
          } else {
            console.log(btnLoading.value)
          }
        })
      }
      const handleBeforeOk = () => {
        userForm.value?.validate().then((error: any) => {
          if (!error) {
            btnLoading.value = true
            if (subForm.passWordmd5 != '') {
              subForm.passWord = md5(subForm.passWordmd5)
            }
            if (subForm.departmentId == '0') {
              subForm.departmentId = ''
            }
            if (subForm.roleId == '0') {
              subForm.roleId = ''
            }
            if (dialogTitle.value == '新建用户') {
              http
                .post({
                  url: addUser,
                  data: () => {
                    return {
                      ...subForm,
                    }
                  },
                })
                .then((res) => {
                  btnLoading.value = false
                  if (res.code == 0) {
                    Message.success(res.msg)
                    visible.value = false
                    doRefresh()
                  } else {
                    Message.error(res.msg)
                  }
                })
            } else if (dialogTitle.value == '编辑用户')
              http
                .post({
                  url: updateUser,
                  data: () => {
                    return {
                      ...subForm,
                    }
                  },
                })
                .then((res) => {
                  btnLoading.value = false
                  if (res.code == 0) {
                    Message.success(res.msg)
                    visible.value = false
                    doRefresh()
                  } else {
                    Message.error(res.msg)
                  }
                })
          } else {
            console.log(btnLoading.value)
          }
        })
      }
      const handleBeforeOkBansb = () => {
        shebeivisible.value = false
        doRefresh()
      }
      const handleCancel = () => {
        userForm.value?.resetFields()
        visible.value = false
      }
      const handleCancelBan = () => {
        balanceForms.value?.resetFields()
        balancevisible.value = false
      }
      const handleCancelsb = () => {
        shebeivisible.value = false
      }
      const ouLine = (item: any) => {
        Modal.warning({
          title: '操作确认',
          content: '确定要下线此设备吗？',
          cancelText: '取消',
          titleAlign: 'start',
          hideCancel: false,
          okText: '确定',
          onOk: () => {
            http
              .get({
                url: getoutLine,
                data: () => {
                  return {
                    session: item.session,
                  }
                },
              })
              .then((res) => {
                if (res.code == 0) {
                  let id1 = sessionList.value.findIndex((items: any) => {
                    if (items.id == item.id) {
                      return true
                    }
                  })
                  sessionList.value.splice(id1, 1)
                  Message.success(res.msg)
                  doRefresh()
                } else {
                  Message.error(res.msg)
                }
              })
          },
        })
      }
      const userDoing = (item: any) => {
        Modal.warning({
          title: '操作确认',
          content: '确定要解冻该账号吗？',
          cancelText: '取消',
          titleAlign: 'start',
          hideCancel: false,
          okText: '确定',
          onOk: () => {
            http
              .get({
                url: jiedongAdmin,
                data: () => {
                  return {
                    id: item.id,
                  }
                },
              })
              .then((res) => {
                if (res.code == 0) {
                  Message.success(res.msg)
                  doRefresh()
                } else {
                  Message.error(res.msg)
                }
              })
          },
        })
      }
      function doRefresh(value?: number) {
        // eslint-disable-next-line prettier/prettier
        tableLoading.value = true
        if (value) {
          pagination.page = value
        }
        http
          .get({
            url: getTableList,
            data: () => {
              return {
                page: pagination.page,
                size: pagination.pageSize,
                ...form,
              }
            },
          })
          .then((res) => {
            tableLoading.value = false
            table.handleSuccess(res.data.list)
            pagination.setTotalSize((res.data as any).totalSize)
          })
          .catch(console.log)
      }
      const clickT = (item: any) => {
        sessionList.value = JSON.parse(JSON.stringify(item))
        sessionList.value.forEach((element: any) => {
          let atime = Math.floor(
            (new Date().getTime() - new Date(element.loginTime).getTime()) / 1000
          )
          element.time = useCommon.formatTimeDifference(atime)
        })

        shebeivisible.value = true
      }
      function onAddItem() {
        visible.value = true
        dialogTitle.value = '新建用户'
        passwordText.value = '请输入用户登录密码，不填默认123456'
        subForm.name = ''
        subForm.id = ''
        subForm.passWordmd5 = ''
        subForm.departmentId = ''
        subForm.roleId = ''
        subForm.userName = ''
        subForm.remarks = ''
        subForm.gender = 0
        subForm.state = 0
        subForm.passWord = ''
        subForm.phone = ''
        subForm.single = false
        modalDialog.value?.toggle()
      }
      function onUpdate(item: any) {
        if (item.departmentId) {
          subForm.departmentId = item.departmentId
        } else {
          subForm.departmentId = '0'
        }
        if (item.roleId) {
          subForm.roleId = item.roleId
        } else {
          subForm.roleId = '0'
        }
        dialogTitle.value = '编辑用户'
        passwordText.value = '请输入密码(为空表示不修改密码)'
        subForm.name = item.name
        subForm.id = item.id
        subForm.userName = item.userName
        subForm.remarks = item.remarks
        subForm.gender = item.gender
        subForm.state = item.state
        subForm.passWord = ''
        subForm.phone = item.phone
        subForm.single = item.single
        visible.value = true
      }
      function onDeleteItem(item: any) {
        Modal.warning({
          title: '操作确认',
          content: '确定要删除此用户吗？',
          cancelText: '取消',
          titleAlign: 'start',
          hideCancel: false,
          okText: '删除',
          onOk: () => {
            http
              .get({
                url: delUser,
                data: () => {
                  return {
                    id: item.id,
                  }
                },
              })
              .then((res) => {
                if (res.code == 0) {
                  Message.success(res.msg)
                  doRefresh()
                } else {
                  Message.error(res.msg)
                }
              })
              .catch(console.log)
          },
        })
      }
      function balancePlay(item: any) {
        banlanceForm.balance = ''
        banlanceForm.id = item.id
        balancevisible.value = true
      }

      function onUpdateBorder(isBordered: boolean) {
        table.bordered.value = isBordered
      }
      function onUpdateStriped(isStriped: boolean) {
        table.striped.value = isStriped
      }
      function getRole() {
        http
          .get({
            url: getRoleList,
            data: () => {
              return {
                page: 1,
                size: 100,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              roleList.value = res.data
            }
          })
          .catch(console.log)
      }
      onMounted(async () => {
        table.tableHeight.value = await useTableHeight(getCurrentInstance())
        doRefresh()
        getRole()
      })
      return {
        shebeivisible,
        visible,
        balancevisible,
        banlanceForm,
        loading,
        btnLoading,
        serchForm,
        resetSeach,
        departMentList,
        roleList,
        sessionList,
        sessionColumns,
        clickT,
        handleBeforeOk,
        handleBeforeOkBan,
        handleCancel,
        handleCancelBan,
        dialogTitle,
        passwordText,
        doRefresh,
        tableLoading,
        subForm,
        userForm,
        balanceForms,
        form,
        ...table,
        rowKey,
        selectedRowKeys,
        expandAllFlag,
        tableColumns,
        pagination,
        exportDepartments,
        userDoing,
        ouLine,
        handleBeforeOkBansb,
        handleCancelsb,
        balancePlay,
        onUpdate,
        onAddItem,
        onDeleteItem,
        onUpdateBorder,
        onUpdateStriped,
      }
    },
  })
</script>
<style lang="less" scoped>
  :deep(.arco-modal) {
    .arco-modal-footer {
      text-align: right !important;
    }
  }
  :deep(.arco-table-td-content button) {
    padding: 0px !important;
    margin-right: 8px;
    background: none !important;
  }
  :deep(.arco-modal-header .arco-modal-title) {
    display: flex;
    justify-content: flex-start !important;
  }
</style>
